<template>
  <div class="box2">
    <div class="ranksBox">
      <div class="ranksList" v-for="(item,index) in ranksList.ranksList1.slice(0,10)" :key="item">
        <div>
          <img class="img" v-lazy="item.coverImgUrl" @click="getRankdetail(item.id)">
        </div>
        <div style="margin-left: 20px" class="top3">
          <h2>{{item.name }}</h2>
          <p>1.<span @click="search1(top1(index))">{{top1(index)}}</span>-&nbsp;<span @click="search1(name1(index))">{{name1(index)}}</span></p>
          <p>2.<span @click="search1(top2(index))">{{top2(index)}}</span>-&nbsp;<span @click="search1(name2(index))">{{name2(index)}}</span></p>
          <p>3.<span @click="search1(top3(index))">{{top3(index)}}</span>-&nbsp;<span @click="search1(name3(index))">{{name3(index)}}</span></p>
        </div>
      </div>

      <div class="ranksList2" v-for="(item) in ranksList.ranksList1.slice(10,50)" :key="item">
          <img class="img" :src="item.coverImgUrl" @click="getRankdetail(item.id)">
          <p>{{item.name}}</p>
        <div>
    </div>
  </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {useplayListStore,useSongsStore} from "@/Store/Pinia/pinia";
import { useRouter } from "vue-router";
import {baseURL} from "@/request/index.js";
const router=useRouter();
const songsStore=useSongsStore();
const playListStore=useplayListStore();
const ranksList=reactive({ranksList1:[]});
const ranktop=ref([]);
const list2=ref([]);


const  getRank=async()=>{           //获取各种排行榜列表
 const data1=await axios.post(baseURL+"/toplist")
  ranksList.ranksList1=data1.data.list;
  //3.
  const axiosArr=[];
  ranksList.ranksList1.slice(0,10).forEach((item)=>{
    let fetch= axios.post(baseURL+"/playlist/detail?id="+item.id).then(res=>{
    ranktop.value.push(res.data.privileges.slice(0,3));
  })
    axiosArr.push(fetch);
  })
  Promise.all(axiosArr).then(async ()=>{
    for await (let item of ranktop.value){
      let list=[]
      for await (let item1 of item){
       const a=await axios.post(baseURL+"/song/detail?ids="+item1.id)
          list.push(a.data.songs)
      }
       list2.value.push(list);
    }
    console.log(list2.value);
  })
  //1.
  // for (let item of ranksList.value.slice(0,9)){
  //   const data2= await axios.post(baseURL+"/playlist/detail?id="+item.id)
  //       ranktop.value.push(data2.data.privileges.slice(0,4));
  // }

  // 2.
  // for await (let item of ranksList.value.slice(0,9)){
  //     const data2=await axios.post(baseURL+"/playlist/detail?id="+item.id)
  //         ranktop.value.push(data2.data.privileges.slice(0,4));
  // }
  // console.log(ranktop.value);
}

getRank();
function search1(value){
  songsStore.show=1;
  songsStore.search(value);
  router.push({path:'/homePage/searchList/1'})
}
 async function getRankdetail(id){ //查看排行榜详情
    playListStore.getcurrentplayList(id);
    await  router.push({path: '/homePage/songsList/1'});
}

onMounted(()=>{

})
const top1= computed(()=>(index)=>{
   return list2.value[index][0][0].name;
})
const top2= computed(()=>(index)=>{
  return list2.value[index][1][0].name;
})
const top3= computed(()=>(index)=>{
  return list2.value[index][2][0].name;
})
const name1= computed(()=>(index)=>{
  return list2.value[index][0][0].ar[0].name;
})
const name2= computed(()=>(index)=>{
  return list2.value[index][1][0].ar[0].name;
})
const name3= computed(()=>(index)=>{
  return list2.value[index][2][0].ar[0].name;
})
</script>

<style scoped>
.box2{
  width: 100%;
  height: 450px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.ranksBox{
  display: flex;
  flex-wrap:wrap;
  margin-left: 20px;
}

.ranksBox .ranksList{
  width: 500px;
  height: 250px;
  margin-right: 30px;
  margin-top: 20px;
  transition:All 0.4s ease-in-out;
  cursor: pointer;
  display: flex;
}
.ranksBox .ranksList2{
  width:250px;
  height: 250px;
  margin-right: 30px;
  margin-top: 20px;
  transition:All 0.4s ease-in-out;
  cursor: pointer;
}

.ranksBox .ranksList2 .img{
  width: 220px;
  height: 180px;
}
.ranksBox .ranksList2:hover{
  color: #8e09dc;
  transform:translate(0,-20px);
}
.ranksBox .ranksList .img{
  width: 220px;
  height: 180px;
}
.top3 p span:hover{
  color: #42b983;
  cursor: pointer;
}
</style>